<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<meta charset="utf-8">
	<title>学籍卡</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	
	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
	
	<!-- form style -->
	<link rel="stylesheet" href="/static/admin/css/mini-ease-edit.css">
	
	<style type="text/css">
	.baseinfo {border: 2px solid; border-color: purple; margin-top: 10px; text-align: center; font-size: 24px; height: 50px; line-height: 50px;}
	body{background-color: #f4f4f4 !important;}
	.header{position:fixed;top: 0;width: 100%;background: #fff;z-index: 999;}
	.headcon{width: 1200px;margin: auto; display: flex;align-items: center;color: #1E9FFF;padding: 30px 0;}
	.headcon .tit{font-size: 36px;font-weight: 700;}
	.headcon .search{display: flex;align-items: center;border: 2px solid #1E9FFF;margin-left: 200px;height: 40px;border-radius: 8px;}
	.headcon .search input{border: none;width: 500px;}
	.headcon .searchbtn{background: #1E9FFF;width: 100px;text-align: center;height: 40px;color: #fff;line-height: 40px;font-size: 18px;cursor: pointer;border-bottom-right-radius: 5px;border-top-right-radius: 5px;}
	   
	.goods{background-color: #f4f4f4;padding: 30px 0;max-height: 60vh;}
	.goodscon{width: 100%;margin: auto;background-color: #fff;}
	.goodscon .nodata{text-align: center;padding: 100px;font-size: 18px;color: #888;display: none;}
	.goodscon .itemlist{display: flex;align-items: center;padding: 20px;border-radius: 10px;flex-wrap: wrap}
	.goodscon .item{width: 210px;margin: 10px;border: 1px solid #ddd;cursor: pointer;position: relative;}
	.goodscon .item .zticon{position: absolute;top: 0;left: 0;z-index: 99;width: 50px;height: 50px;}
	.goodscon .item img{width:210px;height:210px;}
	.goodscon .item .top{position: relative;}
	.goodscon .item .top div{position: absolute;bottom: 0;right: 0;background: #999;color: #fff;padding: 2px 5px;font-size: 12px;}
	.goodscon .item .con{padding: 10px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;height: 15px;}
	.goodscon .item .bom{padding: 10px;display: flex;align-items: flex-end;justify-content: space-between;}
	.goodscon .item .bom div:nth-child(1){color: #ee5417;}
	.goodscon .item .bom div:nth-child(2){color: #999;font-size: 12px;position: relative;top: -5px;}
	.goodscon .item .bom2{padding: 10px;display: flex;align-items: flex-end;justify-content: space-between;}
	.goodscon .item .bom2 div:nth-child(1){color: #999;font-size: 12px;position: relative;top: -5px;}
	.goodscon .item .bom2 div:nth-child(2){color: #999;font-size: 12px;position: relative;top: -5px;}
	.goodscon .item .bom3{padding: 10px;display: flex;align-items: flex-end;justify-content: space-between;}
	.goodscon .item .bom3 div:nth-child(1){color: #999;font-size: 12px;position: relative;top: -5px; right: -5px;}
	</style>
</head>
<body>
	<div style="padding-top: 20px; height: 28vh;">
		<div class="layui-row">
			<div class="layui-col-md8" style="padding: 10px;">
				<div class="layui-row baseinfo">
					<div class="layui-col-md2">
						NO.--
					</div>
					<div class="layui-col-md4">
						<i class="layui-icon layui-icon-face-smile"></i>[[${dto.gradeName}]]
					</div>
					<div class="layui-col-md3">
						<i class="layui-icon layui-icon-face-smile"></i>[[${dto.currentPointNeed}]]
					</div>
					<div class="layui-col-md3">
						<span title="当前可用学分">
							<i class="layui-icon layui-icon-face-smile"></i>[[${dto.point}]]
						</span>
					</div>
				</div>
				<div class="layui-row baseinfo">
					<div class="layui-col-md2">
						下一级
					</div>
					<div class="layui-col-md4">
						<i class="layui-icon layui-icon-face-smile"></i>[[${dto.nextGradeName}]]
					</div>
					<div class="layui-col-md3">
						<i class="layui-icon layui-icon-face-smile"></i>[[${dto.nextPointNeed}]]
					</div>
					<div class="layui-col-md3">
						<span title="升下一级学分差">
							<i class="layui-icon layui-icon-face-smile"></i>[[${dto.nextPointGap}]]
						</span>
					</div>
				</div>
			</div>
			<div class="layui-col-md4" style="padding: 20px;">

	        	<div class="layui-table-box">
	        		<div class="layui-table-header">
		            	<table cellspacing="0" cellpadding="0" border="0" class="layui-table" lay-skin="grid" style="margin: 0;">
		            		<thead>
		            			<tr>
		            				<th style="width:5%; text-align: center; color: #000000;">任务类型</th>
		            				<th style="width:5%; text-align: center; color: #000000;">累计积分</th>
		            			</tr>
		            		</thead>
		            		<tbody>
		            			<tr style="height: 40px;" th:each="running : ${dto.runningArr}">
		            				<td style="text-align:center; padding: 0;">[[${running.typeName}]]</td>
		            				<td style="text-align:center; padding: 0;">[[${running.pointLeft}]]</td>
		            			</tr>
		            		</tbody>
		        		</table>
	        		</div>
	    		</div>
			</div>
		</div>
	</div>
	<div style="padding-top: 20px; height: 60vh; border: 2px solid; border-color: purple; margin: 20px;">
		<div>
			<span style="font-weight: 700; font-size: 30px; padding-left: 20px">我的礼品</span>
		</div>
		<div class="goods">
			<div class="goodscon">
				<div class="nodata">
					<img style="width: 200px;height:200px" src="/static/img/nodata.png" alt="">
					<div>暂无数据</div>
				</div>
				<div class="itemlist">
				</div>
				<div id="demo2"></div>
			</div>
		</div>
	</div>
	
<script type="text/javascript">

var urlList = '/api/inter/tmUserGift/listMyself';
var totalNum = 5;

var $,layer,laydate,form,table,wherestr={};
layui.use(['table','laydate','form','layer','jquery','element','laypage'], function () {
	$ = layui.$, layer = layui.layer,laydate = layui.laydate , form = layui.form, table = layui.table, element = layui.element, laypage = layui.laypage;
	
	// 加载页面
	loadPage();
});

function loadPage() {
	// 加载第一页数据
	listData(1);
	
	// 加载分页导航
	loadLayPage();
}

/*
 * 加载列表数据
 */
function listData(page){
	var data = {page: page};
	
	$.ajaxSettings.async = false;
	$.get(urlList,data,function(res){
		var rows = res.data.rows;
		var str= ``;
		if(rows.length>0){
			$('.nodata').hide()
			$('.itemlist').show()
			for(var i=0;i < rows.length;i++){
				var row = rows[i];
				str +=
				`<div class="item">
					<div onclick="gotoDetailGoods('${row.code}')">
						<div class="top">
							<img src="${row.img}">
						</div>
						<div class="con" title="${row.name}">${row.name}</div>
					</div>
					<div class="bom3">
					<div><button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="toUse('${row.code}');">使用</button><button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="toSend('${row.code}');">转赠</button></div>
					</div>
				</div>`
			}
		}else{
			$('.nodata').show()
			$('.itemlist').hide()
		}
		$('.itemlist').html(str)
		totalNum = res.data.totalNum;
	}); 
}

/*
 * 加载分页导航
 */
function loadLayPage() {
	
	// 分页组件
	laypage.render({
		elem: 'demo2'
		,count: totalNum
		,theme: '#1E9FFF'
		,layout: ['prev', 'page', 'next']
		,limit: 7
		,jump: function(obj, first){
			
			// 首次不执行
			if(!first){
				listData(obj.curr);
			}
		}
	});
}


function toUse(code) {
	layer.open({
		type: 2,
		area: ['500px', '450px'],
		fix: true,
		maxmin: false,
		shadeClose: true,
		shade:0.4,
		title: "兑换礼品",
		content: '/web/mall/toUse?code=' + code
	});
}


function toSend(code) {
	layer.open({
		type: 2,
		area: ['500px', '450px'],
		fix: true,
		maxmin: false,
		shadeClose: true,
		shade:0.4,
		title: "兑换礼品",
		content: '/web/mall/toSend?code=' + code
	});
}
</script>
</body>
</html>